<template>
	<navigationBar title="个人中心"></navigationBar>
	<fixedIcon></fixedIcon>
	<view class="lxwx">
		<view class="first-card">
			<view>
				首席服务官
			</view>
			<view class="tip">
				点击二维码，长按识别添加客服，提供1对1配音服务
			</view>
			<img src="/static/icon/image 89.png" class="erwm" />
			<!-- <button class="call">拨打配音热线</button> -->
			<van-button round class="call" @click="callTel">拨打配音热线</van-button>
		</view>
		<img :src="Image" style="width: 100%;" class="second-card" />
		<view class="third-card">
			<view class="one" v-for="(item) in fiveStar" @click="goLook(item)">
				<image :src="item.logo" class="logo" mode="heightFix"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<van-dialog v-model:show="showDialog" :overlay="false" :show-cancel-button="false" :show-confirm-button="false">
			<view class="vandialog">
				<view class="wenzi" style="margin-top: 30px;">
					可在手机端拨打 15272771765
				</view>
				<view class="btns">
					<view class="cancel" @click="handleCancel">
						取消
					</view>
					<view class="submit" @click="handleSubmit">
						复制到剪切板
					</view>
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import Image from '@/static/icon/41de2836-06e9-4553-8dc7-d9042f046b84.png';
	import Img1 from '@/static/icon/Group 1038.png';
	import Img2 from '@/static/icon/Group 979.png';
	import Img3 from '@/static/icon/Group 976.png';
	import Img4 from '@/static/icon/Group 975.png';
	import Img5 from '@/static/icon/Group 977.png';
	import navigationBar from "/components/navigationBar.vue"
	export default {
		components: {
			navigationBar
		},
		data() {
			return {
				Image,
				Img1,
				Img2,
				Img3,
				Img4,
				Img5,
				fiveStar: [{
						logo: Img1,
						text: '五星简介',
						url: '/pages/contactFiveStar/wxjj'
					},
					{
						logo: Img2,
						text: '配音师加盟',
						url: '/pages/contactFiveStar/pysjm'
					},
					{
						logo: Img3,
						text: '常见问题',
						url: '/pages/contactFiveStar/cjwt'
					},
					{
						logo: Img4,
						text: '付款方式',
						url: '/pages/contactFiveStar/fkfs'
					},
					{
						logo: Img5,
						text: '联系我们',
						url: '/pages/contactFiveStar/lxwm'
					}
				],
				showDialog: false
			}
		},
		methods: {
			goLook(cur) {
				uni.navigateTo({
					url: `${cur.url}?data=${JSON.stringify(cur)}`
				})
			},
			callTel() {
				this.showDialog = true;
			},
			handleCancel() {
				this.showDialog = false;
			},
			handleSubmit() {
				navigator.clipboard.writeText('15272771765').then(res => {
					this.showDialog = false
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.lxwx {
		height: calc(100vh - 210rpx);
		padding: 10px;
		background-color: rgb(248, 248, 248);
		overflow: hidden;
	}

	.first-card {
		display: flex;
		padding: 40rpx 80rpx 20rpx 80rpx;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 10rpx;

		.tip {
			font-size: 22rpx;
			color: #999;
			margin-top: 5rpx;
		}

		.erwm {
			width: 250rpx;
		}

		.call {
			width: 100%;
			background-color: #000;
			color: #fff;
			font-size: 30rpx;
		}
	}

	.second-card {
		margin: 10rpx 0;
	}

	.third-card {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 40rpx 20rpx;
		gap: 30rpx 0;
		font-size: 24rpx;
	}

	.one {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
		width: 25%;
	}

	.logo {
		height: 40rpx;
		object-fit: cover;
		color: red;
	}

	.vandialog {
		padding-bottom: 50rpx;
		font-size: 30rpx;

		.wenzi {
			margin-top: 30rpx;
			height: 100rpx;
			text-align: center;
		}


		.btns {
			display: flex;
			justify-content: center;
			gap: 30rpx;


			.cancel {
				background-color: #f2f2f2;
				border-radius: 20rpx;
				width: 200rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.submit {
				background-color: #07c160;
				border-radius: 20rpx;
				color: #fff;
				width: 200rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>